<template style="margin: 0;padding: 0">
  <!--  <el-scrollbar height="50vh">-->
  <el-menu
      popper-effect="light"
      active-text-color="#ffd04b"
      background-color="#001529"
      text-color="#fff"
      :unique-opened="true"
      style="margin: 0;padding: 0;padding-left: 0px;-webkit-user-select: none;user-select:none"
      :collapse="collapsed"
  >
    <template v-for="item in menus.value">
      <el-menu-item :index="item.menuId"  v-if="item.menuType=='MENU'" @click="onClick">
        <el-icon>
          <component :is="item.menuIcon"/>
        </el-icon>
        <template #title> {{ item.menuName }}</template>
      </el-menu-item>


      <el-sub-menu :index="item.menuId" v-if="item.menuType=='DIRECTORY'">
        <template #title>
          <el-icon>
            <component :is="item.menuIcon"/>
          </el-icon>
          <span>{{ item.menuName }}</span>
        </template>


        <el-menu-item-group>
          <el-menu-item :index="citem.menuId" v-for="citem in item.childMenus"  @click="onClick">
            <el-icon>
              <component :is="citem.menuIcon"/>
            </el-icon>
            <template #title> {{ citem.menuName }}</template>

          </el-menu-item>

        </el-menu-item-group>

      </el-sub-menu>

    </template>


  </el-menu>
  <!--  </el-scrollbar>-->
</template>


<script lang="ts" setup>
import {ref, reactive} from 'vue';

const menus: any = defineModel('menus')

const showPage: any = defineModel('showPage')
const showMain: any = defineModel('showMain')

const activeKey = defineModel('activeKey')
const collapsed = defineModel('collapsed')


//菜单展开的组
let openKeys = ref();


function onClick(itemIn) {
  try {
    let index = showPage.value.find((tab) => tab.menuId == itemIn.index);
    //原有数组存在
    if (index != null) {
      showPage.value.forEach((item => {
        item.mainShow = false;
      }))
      index.mainShow = true;

      showMain.value.forEach((item => {
        item.show = false;
        if(item.menuId==itemIn.index){
          item.show = true;
        }

      }))


    } else {
      //原有数组不存在
      const tabs = menus.value.value
      //找出子菜单
      let cmenu = tabs.find((tab) => tab.menuId == itemIn.indexPath[0])
      let showMenu;
      if(cmenu.menuType=="MENU"){
        showMenu=cmenu;
      }else{
        //找出对应菜单
        showMenu = cmenu.childMenus.find((tab) => tab.menuId == itemIn.index)
      }
      showPage.value.forEach((item => {
        item.mainShow = false;
      }))

      showMain.value.forEach((item => {
        item.show = false;
      }))

      showPage.value.push({
        "menuId": showMenu.menuId,
        "menuName": showMenu.menuName,
        "menuRoute": showMenu.menuRoute,
        "mainShow": true
      })
      showMain.value.push({
        "menuId": showMenu.menuId,
        "menuRoute": showMenu.menuRoute,
        "show": true
      })

      console.log(showMain)

    }
  } catch (e) {
    console.log(e)
  }
  activeKey.value = itemIn.index;

}


</script>

<style scoped lang="less">
.el-sub-menu__title{
  padding-left: 0px;
}

</style>